<template>
	<view>
		<view class="box" v-for="(item,index) in dataList" :key="index" @click="goDianpu(item.id)">
			 
				<image :src="item.logo" mode="aspectFill" class="left" ></image>
			
			<view class="right">
				<view class="name">{{item.title}}</view>
				<view class="address">{{item.address_name}}</view>
			</view>
			<view class="iconfont iconyou you"></view>
		</view>
	</view>
</template>

<script>
	import {merchantList} from "@/api/product.js";
	export default {
		data() {
			return {
				dataList:[],
				num:0,
				flag:true
			}
		},
		onLoad(){
			// this.$get(`${merchantList}`,{}).then(r => {
			// 	console.log(r);
			// 	for(let i=0;i<r.data.length;i++){
			// 		this.dataList.push(r.data[i])
			// 	}
			// 	console.log(r);
			// 	}).catch(() => {
			// });
			this.getInfo();
		},
		onReachBottom() {
			if(this.flag){
				this.getInfo();
			}			
		},
		methods: {
			goDianpu(id){
				uni.navigateTo({
					url:"/pages/merchant/merchant?id="+id
				})
			},
			getInfo(){
				this.num++;
				this.$get(`${merchantList}`,{page:this.num}).then(r => {
					console.log(r);
					if(r.data.length<15){
						this.flag=false;
					}
					for(let i=0;i<r.data.length;i++){
						this.dataList.push(r.data[i])
					}
					
					console.log(r);
					}).catch(() => {
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}
	.box {
		position: relative;
		display: flex;
		 margin: 0 30rpx 30rpx 30rpx; 
		/* justify-content: space-between; */
		align-items: center;
	}
	.left {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}
	.right {
		margin-left: 30rpx;
	}
	.name {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}
	.address {
		font-size: 26rpx;
		font-weight: 300;
		color: #333333;
	}
	.you {
		position: absolute;
		right: 0;
	}
</style>
